<template>
	<view style="position: relative;">
		<view
			style="display: flex; flex-direction: column;padding: 106rpx 0 0 30rpx;box-sizing: border-box;font-size: 48rpx;color: #fff; height: 534rpx;background-color: #00C657;line-height: 72rpx; border-radius: 0 0 20% 20%;">
			<text>您好,</text>
			<text>欢迎登录蜀香客</text>
		</view>
		<view
			style="width: 690rpx;height: 419rpx;position: absolute;top: 281rpx;left: 30rpx;background-color: #fff;border-radius: 24rpx;">
			<!-- 头部选项卡 -->
			<view class="head-nav">
				<view v-for="(tab, index) in navList" :class="{ activite: navIndex === index }"
					@click="checkIndex(index)">{{ tab }}</view>
			</view>
			<!-- 内容切换 -->
			<view v-if="!navIndex">
				<view class="content">
					<text>账号</text>
					<text style="padding-left: 20rpx;padding-right: 20rpx;">|</text>
					<input v-model="name" focus @input="input"
						style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
					<image src="/static/login/qx.png" @click="clear"
						style="width: 26rpx;height: 25rpx;padding-left:70rpx;padding-top: 50rpx;" mode="aspectFit">
					</image>
				</view>
				<view class="content" style="margin-top: 40rpx;">
					<text>密码</text>
					<text style="padding-left: 20rpx;padding-right: 20rpx;">|</text>
					<input v-model="pwd" focus type="password" @input="input"
						style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
					<image src="/static/login/yc.png"
						style="width: 26rpx;height: 25rpx;padding-left:70rpx;padding-top: 50rpx;" mode="aspectFit">
					</image>
				</view>
				<view @click="login">
					<button type="default"
						style="line-height: 100rpx;margin-bottom: 20rpx; margin-top: 80rpx; background-color: #00C657;border-radius: 24rpx;width: 632rpx;height: 100rpx;color: #fff;font-size: 30rpx;">
						登录
					</button>
				</view>
				<!-- <navigator url="/pages/reset/reset">
					<text style="font-size: 26rpx;color: #999;margin-left: 555rpx;">忘记密码</text>
				</navigator> -->
				<button class="bottom" type="primary" withCredentials="true" lang="zh_CN" open-type="getUserProfile" @click="wxGetUserInfo">微信一键登录</button>
			</view>
			<view v-if="navIndex">
				<view class="content">
					<text>手机号</text>
					<text style="padding-left: 20rpx;padding-right: 20rpx;">|</text>
					<input v-model="name" focus @input="input"
						style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
					<image src="/static/login/qx.png"
						style="width: 26rpx;height: 25rpx;padding-left:70rpx;padding-top: 50rpx;" mode="aspectFit">
					</image>
				</view>
				<view class="content" style="margin-top: 40rpx;position: relative;">
					<text>验证码</text>
					<text style="padding-left: 20rpx;padding-right: 20rpx;">|</text>
					<input v-model="yzm" focus @input="input"
						style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
					<button type="default"
						style="width: 200rpx;height: 60rpx;background-color: #00C657;color: #fff;font-size: 24rpx;border-radius: 10rpx;position: absolute;top: 28rpx;right: 10rpx;">
						发送验证码
					</button>
				</view>
				<view class="content" style="margin-top: 40rpx;">
					<text>密码</text>
					<text style="padding-left: 50rpx;padding-right: 20rpx;">|</text>
					<input v-model="pwd" focus @input="input"
						style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
				</view>
				<navigator url="/pages/login/login">
					<button type="default"
						style="line-height: 100rpx;margin-bottom: 20rpx; margin-top: 80rpx; background-color: #00C657;border-radius: 24rpx;width: 632rpx;height: 100rpx;color: #fff;font-size: 30rpx;">
						注册
					</button>
				</navigator>
				<view class="xy">
					<text>点击注册即同意</text>
					<text style="color: #000;font-weight: bold;">“用户协议”</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Storage
	} from "@/static/libs/utils";

export default {
	data() {
		return {
			navIndex: 0,
			navList: ['登录', '注册'],
			name: '18010000000',
			pwd: '123456',
			yzm: '1234'
		};
	},
	async onLoad() {

	},
	methods: {
			checkIndex(index) {
				this.navIndex = index;
			},
			login() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			async wxGetUserInfo() {
				//获取用户信息
				await uni.getUserProfile({
					desc: 'weixin',
					success:async (res) => {
						console.log(res)
						Storage.set("avatarUrl", res.userInfo.avatarUrl);
						Storage.set("nickName", res.userInfo.nickName);
						const [loginFail, loginRes] =  await uni.login({
							provider: 'weixin',
						})
						//授权登录
						this.$request.get(
							"/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&m=lionfish_comshop&controller=user.applogin", {
								code: loginRes.code
							}).then(loginRes => {
								//登陆成功，保存token
							Storage.set("token", loginRes.data.token);
							Storage.set("openid",loginRes.data.openid)
							var token = loginRes.data.token;
							this.$request.post(
								"/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&m=lionfish_comshop&controller=user.applogin_do", {
									token: token,
									avatarUrl:Storage.get('avatarUrl'),
									nickName:Storage.get('nickName'),
									share_id:0
								}).then(res => {
								console.log(res)
							})
							uni.getLocation({
								type: 'wgs84',
								success: ({
									longitude,
									latitude
								}) => {
									Storage.set("longitude", longitude);
									Storage.set("latitude", latitude);
								}
							})
							uni.switchTab({
								url: "../index/index"
							});	
						})
					}
				});
			},
			//账号密码登录
			// login(){
			// 	this.token = Storage.get('token')
			// 	this.$request.post("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&m=lionfish_comshop",
			// 	{
			// 		controller:'user.applogin_do',
			// 		token:this.token,
			// 		type:'phone',
			// 		phone:this.name,
			// 		pwd:this.pwd
			// 	}).then(res=>{
			// 		console.log('账号密码登录',res)
			// 		uni.switchTab({
			// 			url:'../index/index'
			// 		})
			// 	})
			// },
			//清空账号
			// clear(){
			// 	this.name = ''
			// }
	    }
	}
</script>

<style lang="scss">
	.activite {
		color: #00C657;
	}

	.head-nav {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		font-size: 36rpx;
		padding: 57rpx 150rpx 50rpx;
	}

	.content {
		display: flex;
		flex-wrap: nowrap;
		width: 632rpx;
		height: 114rpx;
		background-color: #f7f7f7;
		line-height: 114rpx;
		padding-left: 38rpx;
		border-radius: 14rpx;
		font-size: 28rpx;
		color: #999;
		margin: 0 auto;
	}

	.qt {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;

		text {
			font-size: 24rpx;
			color: #999;
			margin: 200rpx auto 100rpx;
		}

		view {
			width: 269rpx;
			height: 2rpx;

			&:first-of-type {
				background: #eeeeee;
				margin-left: -20rpx;
				margin-top: 100rpx;
			}

			&:last-of-type {
				background: #eeeeee;
				margin-right: -20rpx;
				margin-top: 100rpx;
			}
		}
	}

	.xy {
		font-size: 24rpx;
		color: #999;
		margin-top: 40rpx;
		text-align: center;
	}
</style>
